<template>
  <div class="mt-4">
    <el-table :data="data.sale" border :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }">
      <el-table-column prop="sale_amount" :label="$t('machine.summarize.totalSale')" />
      <el-table-column prop="sale_num" :label="$t('machine.summarize.totalSales')" />
    </el-table>
    <el-row :gutter="60" class="mt-8">
      <el-col :span="6">
        <div class="border rounded summarize_msg">
          <div class="p-4">
            <el-link type="primary" :underline="false">{{
              $t("machine.summarize.info")
            }}</el-link>
          </div>
          <div class="pl-4 h-10">
            {{ $t("machine.version") }}：{{ info.version || "--" }}
          </div>
          <div class="pl-4 h-10">
            {{ $t("machine.summarize.IP") }}：{{ info.ip || "--" }}
          </div>
          <div class="pl-4 h-10">
            {{ $t("machine.summarize.externalIP") }}：{{ info.out_ip || "--" }}
          </div>
          <div class="pl-4 h-10">
            {{ $t("machine.summarize.Mac") }}：{{ info.mac_address || "--" }}
          </div>
          <div class="pl-4 h-10">
            {{ $t("date.lastRestartTime") }}：{{
              getPlevel.gettime(find.last_restart_time, 3) || "--"
            }}
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="border rounded summarize_msg">
          <div class="p-4" style="display: flex; justify-content: space-between">
            <el-link type="primary" :underline="false">{{ $t('machine.summarize.controlComputer') }}</el-link>
            <el-button v-prmis="'machine_info_refreshCentra'" :class="data.isLoading ? 'animatio' : ''"
              :disabled="data.isLoading" style="border: none" :icon="RefreshRight" size="small" width="15"
              :title="$t('machine.summarize.refreshCentra')" @click="onRefresHost" />
          </div>
          <div class="pl-4 h-10">{{ $t('machine.summarize.CPUusage') }}：{{ find.cpu_utility !== '' && find.cpu_utility
            !==
            undefined ? find.cpu_utility + '%' : "--" }}</div>
          <div class="pl-4 h-10"> {{ $t('machine.summarize.CPUtemperature') }}：{{ find.cpu_temperature !== '' &&
            find.cpu_utility !== undefined ? find.cpu_temperature + '℃' : "--" }}</div>
          <div class="pl-4 h-10">{{ $t('machine.summarize.memoryFootprint') }}：{{ find.memory_usage || "--" }}</div>
          <div class="pl-4 h-10">
            {{ $t('machine.summarize.Diskoccupancy') }}：{{ find.disk_occupancy || "--" }}
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="border rounded summarize_msg">
          <div class="p-4" style="display: flex; justify-content: space-between">
            <el-link type="primary" :underline="false">{{
              $t("machine.summarize.flow")
            }}</el-link>
            <el-button v-prmis="'machine_info_refreshSim'" v-if="find.iccid" style="border: none" :icon="RefreshRight"
              size="small" width="15" :title="$t('machine.summarize.refreshTraffic')" @click="onRefreshSim" />
          </div>
          <div class="pl-4 h-10">
            {{ $t("machine.summarize.operator") }}：{{ find.operator || "--" }}
          </div>
          <div class="pl-4 h-10">ICCID：{{ find.iccid || "--" }}</div>
          <div class="pl-4 h-10">
            {{ $t("machine.summarize.totalFlow") }}：{{
              getPlevel.measure(find.total_flow, 2) || "--"
            }}
          </div>
          <div class="pl-4 h-10">
            {{ $t("machine.summarize.residualFlow") }}：{{
              getPlevel.measure(find.remain_flow, 2) || "--"
            }}
          </div>
          <div class="pl-4 h-10">
            {{ $t("date.expirationDate") }}：{{
              getPlevel.gettime(find.valid_time, 1) || "--"
            }}
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="border rounded summarize_msg">
          <div class="p-4">
            <el-link type="primary" :underline="false">{{
              $t("machine.summarize.outInfo")
            }}</el-link>
          </div>
          <div class="pl-4 h-10">
            {{ $t("machine.summarize.POS") }}：{{
              find.pos == 1 ? $t("public.usable") : $t("public.disabled")
            }}
          </div>
          <div class="pl-4 h-10">
            {{ $t("machine.summarize.printer") }}：{{
              find.printer == 1 ? $t("public.usable") : $t("public.disabled")
            }}
          </div>
          <div class="pl-4 h-10">
            {{ $t("machine.summarize.scan") }}：{{
              find.scanner == 1 ? $t("public.usable") : $t("public.disabled")
            }}
          </div>
          <div class="pl-4 h-10">
            {{ $t("machine.summarize.cashRegister") }}：{{
              find.cash_register == 1
                ? $t("public.usable")
                : $t("public.disabled")
            }}
          </div>
          <div class="pl-4 h-10">
            {{ $t('machine.channel.expand') }}：{{
              find.sub_cabinet == 1
                ? $t('machine.channel.Connected')
                : $t('machine.channel.Unconnected')
            }}
          </div>
          <div class="pl-4 h-10">
            {{ $t("machine.summarize.takePhoto") }}：
            <span class="pr-4 text-blue-500" @click="macing('screen_img')">{{
              $t("machine.summarize.homePhoto")
            }}</span>
            <span class="pr-4 text-blue-500" @click="macing('camera_img')">{{
              $t("machine.summarize.intPhoto")
            }}</span>
            <span class="pr-4 text-blue-500" v-if="info.machine_level == 2" @click="macing('exchange_img')">{{
              $t("machine.summarize.containerPhoto")
            }}</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="mt-8 text-right">
      <span class="pr-8">{{ $t("date.prodDate") }}：{{
        getPlevel.gettime(find.production_date, 3) || "--"
      }}</span>
      <span class="pr-8">{{ $t("date.deliveryDate") }}：{{
        getPlevel.gettime(find.expiration_date, 3) || "--"
      }}</span>
    </div>
    <el-dialog v-model="data.macimgurl" center width="30%">
      <div v-loading="data.mtloading" class="flex justify-center">
        <el-image v-if="!data.mtloading" :src="data.imgurl"></el-image>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { RefreshRight } from "@element-plus/icons-vue";
import { useI18n } from "vue-i18n";
const { t: $t } = useI18n();
import getPlevel from "@/utils/level";
import { getmachineImg, refreshSim, refreshComputer } from "@/api/machine";
const emit = defineEmits(["onRefreshSim"]);
let props = defineProps({
  info: {
    type: Object,
    default: {},
  },
  find: {
    type: Object,
    default: {},
  },
});
console.log(props.info);
let data = reactive({
  isLoading: false,
  loading: false,
  intervalId: 0, // 定时器标识符
  counter: 0, // 定时器执行累加器
  macimgurl: false, // 设备截屏/拍照
  mtloading: false, // 加载设备截屏/拍照
  imgurl: "", // 设备图片
  sale: [
    // 设备销售额、销量
    {
      sale_amount: props.info.sale_amount || "0.00",
      sale_num: props.info.sale_num || 0,
    },
  ],
});

let onRefresHost = () => {
  data.isLoading = true
  let parm = {
    mi_id: props.find.mi_id,
    machine_id: props.info.machine_id,
  };
  refreshComputer(parm)
    .then((res) => {
      if (res.state == 200 && res.data) {
        data.isLoading = false
        props.find.cpu_utility = res.data.cpu_utility;
        props.find.cpu_temperature = res.data.cpu_temperature;
        props.find.memory_usage = res.data.memory_usage;
        props.find.disk_occupancy = res.data.disk_occupancy;
        ElMessage({
          message: $t("message.refreshSuccess"),
          type: "success",
        });
        emit("onRefreshSim");
      }
    })
    .catch((err) => {
      data.isLoading = false
    });
};
let onRefreshSim = () => {
  let parm = {
    mi_id: props.find.mi_id,
    iccid: props.find.iccid,
  };
  refreshSim(parm)
    .then((res) => {
      if (res.state == 200) {
        ElMessage({
          message: $t("message.refreshSuccess"),
          type: "success",
        });
        emit("onRefreshSim");
      }
    })
    .catch((err) => { });
};
// 获取实时设备图片
let macing = (e) => {
  let obj = {
    machine_id: props.info.machine_id,
    field: e,
  };
  data.macimgurl = true;
  data.mtloading = true;
  setTimeout(() => {
    data.mtloading = false;
  }, 60000);
  getmachineImg(obj)
    .then((res) => {
      data.mtloading = false;
      if (res.state == 200) {
        data.imgurl = res.data;
      }
    })
    .catch((err) => {
      data.mtloading = false;
    });
};
</script>
<style lang="scss" scoped>
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.animatio {
  animation: rotate 3s linear infinite;
}

.el-button--small {
  font-size: 18px;
}

.summarize_msg {
  min-height: 295px;
}
</style>
